import React from 'react'
import { Form, Input,Spin,  DatePicker, Col,  Button, Modal, message,Breadcrumb } from 'antd'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
const FormItem = Form.Item
import  config from '../../assets/config';
class myForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            loading:false,
            startValue:null
        }
    }

    // 提交表单
    handleSubmit = (e) => {
        this.props.form.validateFields((errors, values) => {
            this.hideModal()
          if (!!errors) {
            console.log('Errors in form!!!');
            message.error('操作失败!');
            return;
              };
          let {end,start}=values;
        values.end=end.getTime();
        values.start=start.getTime();
          this.postForm(values)
        });

        //this.props.form.resetFields()
    }
    postForm=(json)=>{
        this.setState({loading:true});
        fetch(config.base+"course/add",{
                method: 'POST',
                mode: config.cors,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body:config.postBody(json)
        }).then(res=>{return res.json()})
        .then(rep=>{
            this.setState({loading:false});
            rep.status==200? message.success(rep.message): message.error(rep.message);
        })
        .catch((e)=>{console.log(e.message)})
    }

    // 显示弹框
    showModal = () => {
        this.setState({ visible: true })
    }


    // 隐藏弹框
    hideModal = () => {
        this.setState({ visible: false })
    }

    addsuccess=()=>{
    	message.success('操作成功!');
    	this.hideModal();
    }
    

    disabledEndDate=(end)=>{
        if (!end || !this.state.startValue) {
          return false;
        }
        return end.getTime() < this.state.startValue.getTime();
    }

    onStartChange=(value)=>{
        this.setState({startValue:value});
    }
    render() {
        const { getFieldProps } = this.props.form

        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 12 }
        }

        return (
        <Spin spinning={this.state.loading}>
        <Breadcrumb ><Breadcrumb.Item><a href="javascript:window.history.go(-1);">返回</a></Breadcrumb.Item></Breadcrumb>
            <Form horizontal onSubmit={this.handleSubmit} className="animated fadeInUp ">
                <FormItem
                    id="control-input1"
                    label="课程名称"
                    {...formItemLayout}
                     hasFeedback>
                    <Input id="control-input1" placeholder="请输入课程名..."
                    {...getFieldProps('name', {
                      rules: [
                        { required: true,  message: '请输入用户名' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    id="control-input2"
                    label="上课地址"
                    {...formItemLayout}
                     hasFeedback>
                    <Input id="control-input2" placeholder="请输入上课地址..."
                    {...getFieldProps('address', {
                      rules: [
                        { required: true,  message: '请输入上课地址' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    id="control-input3"
                    label="老师名字"
                    {...formItemLayout}
                     hasFeedback>
                    <Input id="control-input3" placeholder="请输入老师名字..."
                    {...getFieldProps('teacherName',{
                      rules: [
                        { required: true,  message: '请输入老师名字' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    id="control-input4"
                    label="负责人名字"
                    {...formItemLayout}
                     hasFeedback>
                    <Input id="control-input4" placeholder="请输入负责人名字..."
                    {...getFieldProps('dutyName',{
                      rules: [
                        { required: true,  message: '请输入负责人名字' }
                      ],
                    })} />
                </FormItem>
                <FormItem
                    label="课程日期起止"
                    labelCol={{ span: 6 }}
                    required>
                    <Col span="5">
                        <FormItem>
                            <DatePicker   {...getFieldProps('start',{
                      rules: [
                        { required: true,  message: '请输入开始时间' }
                      ],
                      onChange:this.onStartChange
                    })}   placeholder="开始日期" />
                        </FormItem>
                    </Col>
                    <Col span="2">
                        <p className="ant-form-split">-</p>
                    </Col>
                    <Col span="5">
                        <FormItem>
                            <DatePicker  {...getFieldProps('end',{
                      rules: [
                        { required: true,  message: '请输入结束时间' }
                      ],
                    })} disabledDate={this.disabledEndDate}  placeholder="结束日期" />
                        </FormItem>
                    </Col>
                </FormItem>

                <FormItem
                    id="control-textarea"
                    label="课程说明"
                    {...formItemLayout} required>
                    <Input type="textarea" id="control-textarea" rows="3" 
                    {...getFieldProps('description',{
                      rules: [
                        { required: true,  message: '请输入开始时间' }
                      ],
                    })} />
                </FormItem>
                <FormItem wrapperCol={{ span:12, offset:6 }} style={{ marginTop: 24 }}>
                    <Button  type="primary block" onClick={this.showModal}>确定</Button>
                </FormItem>
                <Modal title="提示" visible={this.state.visible} loading={this.state.iconLoading}   onOk={this.handleSubmit} onCancel={this.hideModal}>
                    确定添加此课程吗？
                </Modal>
            </Form>
        </Spin>
        )
    }
}

myForm = Form.create()(myForm)

export default myForm